<template>
  <view class="list-components">
    <view class="left-content">
      <image :src="showData.imageUrl" mode="widthFix"></image>
      <view class="no-inventory" v-if="!showData.inventory">已抢光</view>
    </view>
    <view class="right-content">
      <view
        class="title-text"
        :class="showData.inventory ? '' : 'no-inventory'"
        >{{ showData.title }}</view
      >
      <view class="price-box no-inventory" v-if="!showData.inventory">
        <text class="price-text">
          <text class="rmb-text">¥</text>
          <text class="price-num">{{ showData.price }}</text>
        </text>
      </view>
      <view v-else>
        <view class="price-box">
          <text class="price-text">
            <text class="rmb-text">¥</text>
            <text class="price-num">{{ showData.price }}</text>
          </text>
          <view class="te-mai">特卖价</view>
          <text class="oldPrice-text">{{ showData.oldPrice }}</text>
          <text class="discount-text">{{ showData.discount }}</text>
        </view>
        <view class="other-text"> 限时优惠，剩2天 </view>
        <view class="rank-box" v-if="showData.rank">
          <text class="rank-text">{{ showData.rank }} </text>
        </view>
      </view>
      <!-- 底部相似和按钮 -->
      <view class="bottom-box">
        <view class="similar-box" v-if="showData.inventory">
          <text class="iconfont icon-weibiaoti--4"></text>
          <text class="text">找相似</text>
          <text class="iconfont icon-weibiaoti--10"></text>
        </view>
        <!-- 底部右侧按钮和购物 -->
        <view class="botton-box" v-if="showData.inventory">
          <view class="shopping">
            <text class="iconfont icon-weibiaoti--40"></text>
            加购</view
          >
          <view class="to-shopping">去购物</view>
          <view class="inventory-text">{{ showData.inventoryText }}</view>
        </view>
        <view class="no-botton-box" v-else>
          <view class="brand"> 逛品牌</view>
          <view class="similar">找相似</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "",
  props: {
    showData: {
      type: Object,
      default: () => {
        return {
          id: 1,
          title: "Nike SB Alleyoop 复古休闲 低帮 板鞋 男款 黄灰色",
          price: "149",
          oldPrice: "199",
          discount: "1.5折",
          imageUrl: "/static/dataImage/weipinhui/001.webp",
          rank: "入选 No.18-运动潮流男外套榜",
          inventory: true,
          inventoryText: "剩：M | L码",
        };
      },
    },
  },
  components: {},
  setup() {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.list-components {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 10rpx;
  margin-top: 10rpx;
  border-radius: 15rpx;
  .left-content {
    width: 220rpx;
    height: 220rpx;
    overflow: hidden;
    border-radius: 20rpx;
    position: relative;
    image {
      display: block;
      width: 100%;
    }
    .no-inventory {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 50rpx;
      background: #00000093;
      color: #fff;
      text-align: center;
      line-height: 50rpx;
      font-size: 24rpx;
    }
  }
  .right-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 20rpx;
    .title-text {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: 26rpx;
      &.no-inventory {
        color: #989898;
      }
    }
    .price-box {
      display: flex;
      flex-direction: row;
      justify-content: start;
      align-items: center;
      margin-top: 15rpx;
      &.no-inventory {
        color: #989898;
      }
      .price-text {
        line-height: 22rpx;

        .rmb-text {
          font-size: 22rpx;
          font-weight: 700;
        }
        .price-num {
          font-size: 32rpx;
          font-weight: 700;
        }
      }
      .te-mai {
        background: #fcebf3;
        color: #ff0777;
        line-height: 24rpx;
        padding: 0 6rpx;
        margin-left: 10rpx;
        font-size: 18rpx;
        border-radius: 4rpx;
      }
      .discount-text {
        font-weight: 300;
        font-size: 22rpx;
        color: #4f4f4f;
        margin-left: 10rpx;
      }
      .oldPrice-text {
        font-weight: 300;
        font-size: 22rpx;
        margin-left: 10rpx;
        color: #4f4f4f;
        text-decoration: line-through;
      }
    }
    .other-text {
      color: #ff0777;
      font-size: 20rpx;
      margin-top: 10rpx;
    }
    .rank-box {
      margin-top: 10rpx;
      .rank-text {
        color: #a8560a;
        background: #fef3ec;
        font-size: 22rpx;
        border-radius: 10rpx;
        padding: 4rpx 6rpx;
      }
    }
    .bottom-box {
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 10rpx;
      font-size: 22rpx;
      color: #adadad;
      .similar-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        .text {
          padding: 0 6rpx;
        }
        .icon-weibiaoti--4 {
          font-size: 22rpx;
        }
        .icon-weibiaoti--10 {
          font-size: 20rpx;
          margin-top: 2rpx;
          transform: rotate(180deg);
        }
      }
      .botton-box {
        display: flex;
        border: 1rpx solid #ff0777;
        border-radius: 12rpx;
        position: relative;
        .inventory-text {
          position: absolute;
          right: 0rpx;
          border: 1rpx solid #f0dee6;
          color: #ff0777;
          padding: 2rpx 4rpx;
          border-radius: 8rpx 8rpx 0 8rpx;
          background: #fff;
          font-size: 18rpx;
          top: -24rpx;
        }
        .shopping {
          color: #ff0777;
          padding: 8rpx 20rpx;
          .icon-weibiaoti--40 {
            font-size: 22rpx;
            margin-right: 4rpx;
          }
        }
        .to-shopping {
          // background: linear-gradient(to right, #ff0777, #ea4498);
          background: linear-gradient(270deg, #ff11a0 -0.11%, #ff0777 99.89%);
          padding: 8rpx 26rpx;
          color: #fff;
          border-radius: 0 12rpx 12rpx 0;
        }
      }
      .no-botton-box {
        margin-left: auto;
        display: flex;
        border-radius: 12rpx;
        overflow: hidden;
        .brand,
        .similar {
          border: 1rpx solid #989898;
          padding: 8rpx 26rpx;
          border-radius: 12rpx;
          margin-left: 10rpx;
          color: #595959;
        }
      }
    }
  }
}
</style>
